<template>
	<view class="login-container">
		<view class="login-form">
			<view class="login-title">用户登录</view>
			<view class="input-group">
				<input type="text" v-model="username" placeholder="请输入用户名" />
			</view>
			<view class="input-group">
				<input type="password" v-model="password" placeholder="请输入密码" />
			</view>
			<button @click="handleLogin">登录</button>
			<view class="login-footer">
				© 菜购生鲜
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			handleLogin() {
				// 调用登录接口
				uni.request({
					url: 'http://localhost:8080/api/login',
					method: 'POST',
					data: {
						username: this.username,
						password: this.password
					},
					success: (res) => {
						if (res.data.code === 200) {
							// 登录成功，保存用户信息
							uni.setStorageSync('userInfo', res.data.data);
							// 跳转到首页
							uni.switchTab({
								url: '/pages/product/list'
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	.login-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 15px;
		box-sizing: border-box;
	}

	.login-form {
		width: 100%;
		max-width: 400px;
		padding: 30px 25px;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 20px;
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(10px);
		animation: fadeIn 0.5s ease-out;
		box-sizing: border-box;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.login-title {
		text-align: center;
		font-size: 28px;
		font-weight: bold;
		color: #333;
		margin-bottom: 30px;
	}

	.input-group {
		margin-bottom: 25px;
		position: relative;
	}

	.input-group input {
		width: 100%;
		padding: 12px 20px;
		border: 2px solid #e1e1e1;
		border-radius: 12px;
		font-size: 16px;
		line-height: 1.5;
		box-sizing: border-box;
		transition: all 0.3s ease;
		background-color: #f8f9fa;
		height: auto;
		min-height: 45px;
		display: block;
	}

	.input-group input:focus {
		border-color: #409eff;
		box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
		outline: none;
		background-color: #fff;
	}

	.input-group input::placeholder {
		color: #aaa;
		line-height: 1.5;
	}

	.login-form button {
		width: 100%;
		padding: 16px;
		background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
		color: #fff;
		border: none;
		border-radius: 12px;
		font-size: 18px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
		margin-top: 10px;
		box-sizing: border-box;
	}

	.login-form button:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
	}

	.login-form button:active {
		transform: translateY(0);
	}

	.login-footer {
		text-align: center;
		margin-top: 25px;
		color: #666;
		font-size: 14px;
	}
</style>